//拥抱Placeholder,与Mixins不同，%placeholder也可以多次使用，而且不会生成重复的代码。这使得输入的CSS更友好，更干净

%bg-image {
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
%btn {
  padding: 10px;
  color:#fff;
  curser: pointer;
  border: none;
  shadow: none;
  font-size: 14px;
  width: 150px;
  margin: 5px 0;
  text-align: center;
  display: block;
}
%ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
%flex-row{
  display: flex;
  flex-direction: row;
}
%flex-column{
  display: flex;
  flex-direction: column;
}
%flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

//定位上下左右居中
%center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//定位上下居中
%center-vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

//定位左右居中
%center-horizon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
%ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
%left{
  float: left;
}

%right{
  float: right;
}

%hide{
  display: none;
}

%show{
  display: block;
}
%line {width: 100%;height: 2px;margin: 10px 0;font-size:0;overflow: hidden;}
%line-xs{margin: 0}
%line-lg{margin-top:15px;margin-bottom: 15px}
%b-t{border-top: 1px solid #dee5e7}
%b-r{border-right: 1px solid #dee5e7}
%b-b{border-bottom: 1px solid #dee5e7}
%b-l{border-left: 1px solid #dee5e7}

%m-xxs{margin: 2px 4px}
%m-xs{margin: 5px;}
%m-sm{margin: 10px;}
%m{margin: 15px;}
%m-md{margin: 20px;}
%m-lg{margin: 30px;}
%m-xl{margin: 50px;}
%m-n{margin: 0 !important}

%m-l-none{margin-left: 0 !important}
%m-l-xs{margin-left: 5px;}
%m-l-sm{margin-left: 10px;}
%m-l{margin-left: 15px}
%m-l-md{margin-left: 20px;}
%m-l-lg{margin-left: 30px;}
%m-l-xl{margin-left: 40px;}
%m-l-xxl{margin-left: 50px;}

%m-t-none{margin-top:0 !important}
%m-t-xxs{margin-top: 1px;}
%m-t-xs{margin-top: 5px;}
%m-t-sm{margin-top: 10px;}
%m-t{margin-top: 15px}
%m-t-md{margin-top: 20px;}
%m-t-lg{margin-top: 30px;}
%m-t-xl{margin-top: 40px;}
%m-t-xxl{margin-top: 50px;}

%m-r-none{margin-right: 0 !important}
%m-r-xxs{margin-right: 1px}
%m-r-xs{margin-right: 5px}
%m-r-sm{margin-right: 10px}
%m-r{margin-right: 15px}
%m-r-md{margin-right: 20px}
%m-r-lg{margin-right: 30px}
%m-r-xl{margin-right: 40px}
%m-r-xxl{margin-right: 50px}

%m-b-none{margin-bottom: 0 !important}
%m-b-xxs{margin-bottom: 1px;}
%m-b-xs{margin-bottom: 5px;}
%m-b-sm{margin-bottom: 10px;}
%m-b{margin-bottom: 15px;}
%m-b-md{margin-bottom: 20px;}
%m-b-lg{margin-bottom: 30px;}
%m-b-xl{margin-bottom: 40px;}
%m-b-xxl{margin-bottom: 50px;}

%right-arrow{
  content: " ";
  display: inline-block;
  height: 0.16rem;
  width: 0.16rem;
  border-width: 0.04rem 0.04rem 0 0;
  border-color: #aaa;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -0.04rem;
  position: absolute;
  top: 50%;
  margin-top: -0.08rem;
  right: 0.4rem;
}
%down-arrow{
  content: " ";
  display: inline-block;
  height: 0.16rem;
  width: 0.16rem;
  border-width: 0.04rem 0.04rem 0 0;
  border-color: #aaa;
  border-style: solid;
  transform: rotate(135deg);
  top: -0.04rem;
  position: absolute;
  top: 50%;
  margin-top: -0.15rem;
  right: 0.24rem;
}
%bottom-line{
  content: '';
  position: absolute;
  left:0;
  bottom:0;
  height:0.02rem;
  width:100%;
  background: #eee;
}
%top-line{
  content: '';
  position: absolute;
  left:0;
  top:0;
  height:0.02rem;
  width:100%;
  background: #eee;
}